Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Rounded and Square Inputs
We can add rounded and square inputs with the rounded and square props with the outlined prop.
And we can add the borderless prop to remove the text input’s border:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-input rounded outlined v-model="text" label="Rounded"></q-input>
<br />
<q-input square outlined v-model="text" label="Square"></q-input>
<br />
<q-input borderless v-model="text" label="Outlined"></q-input>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
text: ""
}
});
</script>
</body>
</html>
Color and Icon
We can change the color and icon of text inputs.
To do this, we write:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-input
color="lime-11"
bg-color="green"
filled
v-model="text"
label="Label"
>
<template v-slot:prepend>
<q-icon name="event" />
</template>
</q-input>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
text: ""
}
});
</script>
</body>
</html>
We add the color prop to change the color of the label, placeholder, and outline when we focus on the input.
bg-color changes the background color.
filled adds the background color.
Then to add an icon into the input, we put it in the prepend slot.
This adds the icon to the left side of the input.
To add an icon to the right, we add it to the append slot:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-input
color="lime-11"
bg-color="green"
filled
v-model="text"
label="Label"
>
<template v-slot:append>
<q-icon name="event"></q-icon>
</template>
</q-input>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
text: ""
}
});
</script>
</body>
</html>
To add a hint for the user below the input box, we populate the hint slot:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-input v-model="text" label="Label" bottom-slots counter clearable>
<template v-slot:prepend>
<q-icon name="event"></q-icon>
</template>
<template v-slot:hint>
Field hint
</template>
</q-input>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
text: ""
}
});
</script>
</body>
</html>
We need the bottom-slots prop set to true to display the content of the hint slot.
Also, we added the counter prop to show the number of characters we entered.
clearable adds a button to the right of the input to let us click on it to clear the input value.
Conclusion
We can add text fields with various options into our Vue app with the Quasar library.
